<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我的</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../../plug-in/mui/css/mui.css">
    <link rel="stylesheet" href="../../plug-in/iconfont/iconfont.css">

    <link rel="stylesheet" href="../common/head.css">
    <link rel="stylesheet" href="index.css">
    <script src="../../plug-in/jquery/jquery-3.4.1.min.js"></script>
    <script src="../../plug-in/cookie/jquery.cookie.js"></script>

    <script src="../common/head.js"></script>

</head>

<body>

<header class="mui-bar mui-bar-nav common-header" style="box-shadow: 0 0px 0px #fff;">
    <h1 class="mui-title">我的</h1>
</header>

<nav class="mui-bar mui-bar-tab common-nav">
    <a id="home" class="mui-tab-item" href="#tabbar">
        <span class="mui-icon iconfont iconhome"></span>
        <span class="mui-tab-label ">首頁</span>
    </a>
    <a id="classify" class="mui-tab-item " href="#tabbar-with-chat">
        <span class="mui-icon iconfont iconclassify"></span>
        <span class="mui-tab-label">分類</span>
    </a>
    <a id="cart" class="mui-tab-item" href="#tabbar-with-contact">
        <span class="mui-icon iconfont iconcart"></span>
        <span class="mui-tab-label">購物車</span>
    </a>
    <a id="me" class="mui-tab-item mui-active" href="#tabbar-with-map">
        <span class="mui-icon iconfont iconme"></span>
        <span class="mui-tab-label">我的</span>
    </a>
</nav>

<div class="mui-content" style="height: 100%; background-color: #f5f5f5">
    <div style="height: 4.95rem; background-color: #232323; color: white">

        <div style="height: 3.3rem;  margin: 0 .6rem ;border-bottom: solid #424242 1px;">
            <img src="../../img/me/touxiang.png" style="width: 2rem; margin-top: 0.88rem; float: left">
            <div style="float:left;margin-left: 0.4rem; color: white; font-size: 0.45rem; margin-left: 0.4rem; margin-top: 1.1rem;">
                <span id="nickname">文强</span>
                <div style="height: 0.58rem; background-color: #dbc6a6; color: #83653e; width: 2.1rem;
                text-align: center; font-size: 0.28rem;border-radius: 0.5rem; margin-top: 0.2rem">
                    <span>普卡</span>
                </div>
            </div>
        </div>
        <div>

            <div style="float: left; width: 33%; border-right: solid #424242 1px; height: 1rem;
            margin-top: 0.23rem;text-align: center; font-size: 0.3rem;">
                <div id="point" style="line-height: 0.5rem;">0</div>
                <div style="line-height: 0.5rem;">積分</div>
            </div>
            <div style="float: left; width: 33%; border-right: solid #424242 1px; height: 1rem;
            margin-top: 0.23rem;text-align: center; font-size: 0.3rem;">
                <div style="line-height: 0.5rem;">89</div>
                <div style="line-height: 0.5rem;">纍計消費</div>
            </div>
            <div style="float: left; width: 33%; height: 1rem;
            margin-top: 0.23rem;text-align: center; font-size: 0.3rem;">
                <div style="line-height: 0.5rem;">2</div>
                <div style="line-height: 0.5rem;">優惠券</div>
            </div>

        </div>

    </div>

    <div style="height: 3.2rem; background-color: white; margin-top: 0.3rem">
        <div id="meOrderBtn" style="margin-left: 0.25rem; height: 1.5rem; line-height: 1.5rem;border-bottom: solid #ededed 1px;">
            <span style="float: left; font-size: 0.35rem">我的訂單</span>
            <span class="mui-icon mui-icon-arrowright"
                  style="float: right;line-height: 1.5rem; color: #7e7e7e;margin-right: 0.3rem;"></span>
        </div>
        <div style="color: #888888; ">
            <div id="payBtn" style="float: left; width: 25%; text-align: center; padding-top: 0.4rem">
                <span class="iconfont iconwallet" style="display: block; font-size: 0.5rem"></span>
                <span style="display: block; font-size: 0.3rem">待付款</span>
            </div>
            <div id="deliveryBtn" style="float: left; width: 25%; text-align: center; padding-top: 0.4rem">
                <span class="iconfont iconshipment" style="display: block; font-size: 0.5rem"></span>
                <span style="display: block; font-size: 0.3rem">待發貨</span>
            </div>
            <div id="receiptBtn" style="float: left; width: 25%; text-align: center; padding-top: 0.4rem">
                <span class="iconfont icontransport" style="display: block; font-size: 0.5rem"></span>
                <span style="display: block; font-size: 0.3rem">待收貨</span>
            </div>
            <div id="evaluationBtn" style="float: left; width: 25%; text-align: center; padding-top: 0.4rem">
                <span class="iconfont iconassess" style="display: block; font-size: 0.5rem"></span>
                <span style="display: block; font-size: 0.3rem">待評價</span>
            </div>
        </div>
    </div>

    <div style="background-color: white; margin-top: 0.3rem">
        <div id="addressBtn" style="margin-left: 0.25rem; height: 1.5rem; line-height: 1.5rem;">
            <span style="float: left; font-size: 0.35rem">收貨地址</span>
            <span class="mui-icon mui-icon-arrowright"
                  style="float: right;line-height: 1.5rem; color: #7e7e7e;margin-right: 0.3rem;"></span>
        </div>
    </div>

    <div style="background-color: white; margin-top: 0.3rem">
        <div id="aboutBtn"  style="margin-left: 0.25rem; height: 1.5rem; line-height: 1.5rem;">
            <span style="float: left; font-size: 0.35rem">關於我們</span>
            <span class="mui-icon mui-icon-arrowright"
                  style="float: right;line-height: 1.5rem; color: #7e7e7e;margin-right: 0.3rem;"></span>
        </div>
    </div>

</div>

</body>
<script src="../../plug-in/mui/js/mui.js"></script>
<script src="../common/footer.js"></script>
<script src="index.js"></script>

</html>
